<template>
	<view class="selectSelfLifting" style="overflow: hidden;">
		<view class="t1">
			<view class="t2">
				<view>
					<image :src="imgUrl+'home_site_icon_gray@2x.png'" mode="widthFix"></image>
					<text class="text_over">{{location}}</text>

				</view>
				<view @click="modifyLocation()">修改定位</view>
			</view>
			<u-search placeholder="搜索门店" v-model="keyword" :showAction="false" @search="csearch"></u-search>
		</view>
		<view class="list">
			<view v-for="(item,idx) in storeList" :key="idx" >
				<view class="t3">
					<view>
						{{item.storeName}}
					</view>
					<view>
						<image @click="freeTell(item.phone)" :src="imgUrl+'11.png'" mode="widthFix"></image>
						<image @click="openLocationFn(item)" :src="imgUrl+'12.png'" mode="widthFix"></image>
						
					</view>
				</view>
				<view class="t4">
					<image :src="imgUrl+'home_site_icon_gray@2x.png'" mode="widthFix"></image>
					{{item.fullAddress}}
				</view>
				<view class="t5" @click="goShopIndex(item)">
					<view class="t6">
						<view>
							<image :src="imgUrl+'25.png'" mode="widthFix"></image>
							门店营业时间 {{item.shopHours}}
						</view>
						<view>
							<image class="img2" :src="imgUrl+'24.png'" mode="widthFix"></image>
						</view>
					</view>
					<view class="t7">
						<view class="t8">
							去下单
						</view>
						<view>
							距离{{item.distance | tofix}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore
				marginBottom="30"
		        :status="status" 
		        :loading-text="loadingText" 
		        :loadmore-text="loadmoreText" 
		        :nomore-text="nomoreText" 
		/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				imgUrl:this.imgUrl,
				longitude:"",
				latitude:"",
				pageIndex:1,
				pageSize:20,
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '找不到了',
				storeList:[],
				location:""
			}
		},
		filters: {
			tofix(item) {
				if (item) {
					return item.toFixed(2) + 'km'
				}
			}
		},
		components: {},
		onLoad(e) {
			if(e.store){
				let store=JSON.parse(e.store)
				console.log(store)
				this.location=store.fullAddress
				this.latitude=store.latitude
				this.longitude=store.longitude
			}
			
			this.getLocation()
			.then(this.GetAllStoreByStoreName)
		},
		onShow() {
			
		},
		methods: {
			csearch(){
					this.pageIndex = 1
					this.storeList = []
					this.GetAllStoreByStoreName()
			},
			modifyLocation(){
				var that= this;
				uni.authorize({
				     scope: 'scope.userLocation',
				     success(res) {
						  uni.chooseLocation({
							success: function (res) {
								console.log(res)
								uni.setStorageSync("locationName", res.name)
								that.location = res.name
								// console.log('位置名称：' + res.name);
								// console.log('详细地址：' + res.address);
								
								console.log('纬度：' + res.latitude);
								console.log('经度：' + res.longitude);
								that.latitude = res.latitude;
								that.longitude = res.longitude
								that.pageIndex = 1;
								that.storeList=[]
								that.$http.GetAllStore({
									code: "L68lO1",
									lng: res.longitude,
									lat: res.latitude,
									distance: 5000
								}).then(res => {
									let store = res.content[0]
									store.fullAddress=that.location
									uni.setStorageSync("store", store)
									uni.setStorageSync("storeArray",  res.content)
									uni.setStorageSync("storeId",store.storeId)
								})
								that.GetAllStoreByStoreName()
							},
							fail(err) {
								console.log(err)
											
							}
						  });
				     },
				     fail(err) {
						console.log(err)
				
				     }
				})
			},
			openLocationFn(item) {
				uni.openLocation({
					// 传入你要去的纬度
					latitude: item.latitude,
					// 传入你要去的经度
					longitude: item.longitude,
					// 传入你要去的地址信息 不填则为空
					address: item.fullAddress,
					// 缩放大小
					scale: 18,
					success: function() {
						console.log('成功的回调success');
					}
				})
			},
			freeTell(phone) {
				wx.makePhoneCall({
					phoneNumber: phone, //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			},
			getLocation(){
				
				return new Promise((resolve,rej)=>{
					uni.getLocation({
						type: 'wgs84',
						success: (res) => {
							this.longitude = res.longitude
							this.latitude = res.latitude
							resolve()
						}
					});
				})
				
			},
			GetAllStoreByStoreName(){
				this.status = "loading"
				this.$http.GetAllStoreByStoreName({
					lng: this.longitude,
					lat: this.latitude,
					pageIndex:this.pageIndex,
					pageSize:this.pageSize,
					storeName:this.keyword,
				}).then(res => {
					if(res.code==0){
						this.status = "loadmore";
						if(res.content.length>0){
							this.storeList = this.storeList.concat(res.content);
							if(res.content.length<this.pageSize){
								this.status = "nomore"
							}
						}else{
							this.status = "nomore"
						}
					}
				})
			},
			goShopIndex(item){
				var that= this;
				console.log(item)
				
				that.latitude = item.latitude;
				that.longitude = item.longitude
				that.pageIndex = 1;
				that.storeList=[]
				that.$http.GetAllStore({
					code: "L68lO1",
					lng: that.longitude,
					lat: that.latitude,
					distance: 5000
				}).then(res => {
					let store = res.content[0]
					store.fullAddress=item.fullAddress
					uni.setStorageSync("store", store)
					uni.setStorageSync("storeArray",  res.content)
					uni.setStorageSync("storeId",store.storeId)
					uni.reLaunch({
						url:"/pages/index/index?page=shop"
					})
				})
				that.GetAllStoreByStoreName()
				
				
			}
		},
		onReachBottom() {
			this.pageIndex ++;
			this.GetAllStoreByStoreName()
		}
	}
</script>

<style scoped lang="scss">
	.selectSelfLifting {
		padding-top: 170upx;
		.text_over {
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 500upx;
			overflow: hidden;
		}
		.t1 {
			background: #fff;
			padding: 20upx 30upx;
			position: fixed;
			z-index: 2;
			top: 0;
			width: 100%;

			.t2 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24upx;
				font-weight: 400;
				color: #BFB49B;
				margin-bottom: 30upx;

				>view {
					display: flex;
					align-items: center;
				}

				text {
					font-size: 28upx;
					font-weight: 400;
					color: #222222;
				}

				image {
					width: 24upx;
					height: 24upx;
					margin-right: 6upx;
				}
			}

		}

		.list {
			>view {
				margin-bottom: 16upx;
				background: #FFFFFF;
				padding: 30upx;

				.t3 {
					font-size: 32upx;
					font-weight: 400;
					color: #222222;
					border-bottom: 1px solid #CCCCCC;
					padding-bottom: 14upx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					image {
						width: 44upx;
						height: 44upx;
						margin-left: 44upx;
					}
				}

				.t4 {
					font-size: 26upx;
					display: flex;
					font-weight: 400;
					margin-bottom: 14upx;
					margin-top: 28upx;
					color: #888888;

					image {
						width: 26upx;
						height: 24upx;
						margin-right: 10upx;
						margin-top: 10upx;
					}
				}

				.t5 {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.t6 {
						font-size: 26upx;
						font-weight: 400;
						margin-top: 28upx;
						color: #888888;

						image {
							width: 26upx; 
							height: 24upx;
							margin-right: 10upx;
							
							
						}
						.img2{
							width: 68upx;
							margin-top: 22upx;
							height: 36upx;
						}
					}
					.t7{
						border-left: 1px solid #CCCCCC;
						width: 200upx;
						text-align: center;
						font-size: 22upx;
						font-weight: 400;
						color: #888888;
						.t8{
							width: 145upx;
							height: 60upx;
							margin: 0 auto;
							margin-bottom: 14upx;
							text-align: center;
							line-height: 60upx;
							background: linear-gradient(270deg, #01AD65 0%, #01AD65 65%, #01AD65 100%);
							border-radius: 100upx;
							font-size: 28upx;
							text-align: center;
							font-weight: 400;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
</style>
